<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">


</head>
<body>

<jsp:include page="${APP_PATH}/common/head-mine.jsp"/>
<div class="col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <label id="notificationId" style="display: none" data-id="${notificationId}"></label>
    <div id="notificationDiv" class="my-3 p-4 bg-white rounded">
    </div>
</div>
<div class="p-4"></div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>
<script>
    //获取指定id的公告信息
    $(function () {
        //获取数据
        $.ajax({
            url: '/getNotification',
            data: {id: $("#notificationId").attr('data-id')},
            type: 'GET',
            success: function (result) {
                if (result.code === 100) {
                    //获取数据成功
                    var $notificationDiv = $("#notificationDiv");
                    var $title = $("<div class='border-bottom border-gray'>").append($("<h3 class='pb-2 mb-0'>").append(result.extend.notification.title));
                    $("<small class='text-muted'>").append(new Date(result.extend.notification.edittime).toLocaleString()).appendTo($title);
                    var $content = $("<p class='p-2'></p>").append(result.extend.notification.content);
                    var imgurl = result.extend.notification.imgurl;
                    var imgs = imgurl.split(",", 9);

                    //图片
                    var $imgs = $("<div>");
                    //图片路径解析
                    $.each(imgs, function (index, item) {
                        //去掉因','分割的数组生成的空元素
                        if (item!='') {
                            $("<div class='py-2' style='overflow: hidden;'>").append($("<img src='" + item + "' width='100%' >")).appendTo($imgs);
                        }
                    });
                    var $clearDiv = $("<div style='clear: both'>");
                    $notificationDiv.append($title).append($content).append($clearDiv).append($imgs).append($clearDiv);
                } else {
                    //获取信息失败
                    toastr.error("获取公告数据失败，请重新登录后重试！");
                }
            }
        })
    });
</script>
</body>
</html>
